<template>
    <el-container style="background-color: var(--noneBGC)">
      <el-header height="40px">
        <div class="flexX">
          <div class="head">
            <div class="headLeft">
            </div>
            <div class="headRight">
              {{
                isLogin ? `已登录，用户名为：`
                        : `您未登录，请先`
              }}
              <el-link
                  type="primary"
                  style="margin-bottom: 2px"
                  v-if="!isLogin"
                  @click="login" >登录</el-link>
              <div v-else style="display: inline">
                <el-dropdown>
                  <el-link type="primary" style="margin-top: 4px">{{store.state.user.username}}</el-link>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="logout">登出</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>

                <el-link type="primary" style="margin-left: 20px" @click="gotoOrder">查看当前订单</el-link>
              </div>
            </div>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
      <el-footer height="300px" style="background-color:#1a1a1a;">
        <div class="flexX">
          <div class="foot">

          </div>
        </div>
      </el-footer>
    </el-container>
</template>

<script setup>
import { ref , onMounted} from 'vue';
import store from "@/store";
import router from "@/router";

const isLogin = ref(false);

const logout = () => {
  location.reload()
}
const home = () => {
  router.push('/')
}
const login = () => {
  router.push('/login')
}
const gotoOrder = () => {
  router.push('/order')
}

onMounted(() => {
  isLogin.value = store.state.user !== null;
})
</script>

<style scoped>
.head{
  width: var(--content);
  height: 100%;
  background-color: white;
}

.foot{
  width: var(--content);
  height: 100%;
  background-color: white;
}
.headRight{
  float: right;
  margin-right: 20px;
  font-size: 14px;
  margin-top: 4px;
}
.el-main{
  --el-main-padding:0px;
}

</style>